<div class="b-island tab-content-fill" pane-set ng-show="features.length">
    <div class="pane_col" pane pane-expanded="isState('behaviors')">
        <div class="pane_overlay clickable" ui-sref="behaviors.story"></div>
        <div class="pane_content">
            <div class="b-island__title">{{'features.REQUIREMENTS' | translate}}</div>
            <h3 class="pane__header">{{'features.FEATURES' | translate}}</h3>
            <table allure-table class="test-list table table-hover table-condensed" sorting="sorting">
                <tbody>
                    <tr ng-repeat-start="feature in list.items" class="feature clickable" ng-click="expandFeature(feature, !feature.expanded)" ng-class="{'feature_expanded': feature.expanded}">
                        <td allure-table-col="{heading:'Title', predicate: 'title', flex: 6}" class="line-ellipsis" title="{{feature.title}}">
                            <span class="feature_icon"></span>
                            {{feature.title}}
                        </td>
                        <td allure-table-col="{heading: 'Failed', predicate: 'statistic.failed', class:'text-center', reverse: true}" class="text-center" colspan="5">
                            <div class="progress">
                                <div class="progress-bar progress-bar-{{percent.status}}" ng-repeat="percent in feature.percents"
                                     tooltip="{{percent.count}} {{percent.status | translate}} ({{percent.ratio|number:0}}%)" ng-style="{width: percent.value+'%'}">
                                    <span>{{percent.count}}</span>
                                </div>
                            </div>
                        </td>
                        <td allure-table-col="{heading: 'Broken', predicate: 'statistic.broken', class:'text-center', reverse: true}" class="ng-hide"></td>
                        <td allure-table-col="{heading: 'Canceled', predicate: 'statistic.canceled', class:'text-center', reverse: true}" class="ng-hide"></td>
                        <td allure-table-col="{heading: 'Pending', predicate: 'statistic.pending', class:'text-center', reverse: true}" class="ng-hide"></td>
                        <td allure-table-col="{heading: 'Passed', predicate: 'statistic.passed', class:'text-center', reverse: true}" class="ng-hide"></td>
                        <td allure-table-col="{heading: 'Total', predicate: 'statistic.total', class:'text-center', reverse: true}" class="text-center">
                            {{feature.statistic.total}}
                        </td>
                    </tr>
                    <tr ng-if="feature.expanded" class="story clickable" ng-click="setStory(story)" ng-class="{active: isActive(story)}" ng-repeat="story in feature.stories | orderBy:sorting.predicate:sorting.reverse">
                        <td class="story_title line-ellipsis" title="{{story.title}}">
                            {{story.title}}
                        </td>
                        <!--<td></td>-->
                        <td class="text-center" colspan="5">
                            <div class="progress">
                                <div class="progress-bar progress-bar-{{percent.status}}" ng-repeat="percent in story.percents"
                                     tooltip="{{percent.count}} {{percent.status | translate}} ({{percent.ratio|number:0}}%)" ng-style="{width: percent.value+'%'}">
                                    <span>{{percent.count}}</span>
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            {{story.statistic.total}}
                        </td>
                    </tr>
                    <tr ng-repeat-end></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="pane_col features__view" ng-if="story" pane pane-expanded="isState('behaviors.story.expanded')">
        <div class="pane_content">
            <div class="pane_overlay clickable" ui-sref="behaviors.story.testcase"></div>
            <div class="features__title b-island__title">{{'features.STORY' | translate}}</div>
            <h3 class="pane__header">
                <div class="pane__header_controls pull-right">
                    <span class="fa fa-expand clickable" tooltip="{{'tooltip.EXPAND' | translate}}" ng-hide="isState('behaviors.story.expanded')" ui-sref="behaviors.story.expanded"></span>
                    <span class="fa fa-compress clickable" tooltip="{{'tooltip.COLLAPSE' | translate}}" ng-show="isState('behaviors.story.expanded')" ui-sref="behaviors.story"></span>
                    <span class="fa fa-close clickable" tooltip="{{'tooltip.CLOSE' | translate}}" ui-sref="behaviors"></span>
                </div>
                {{story.title}}
            </h3>
            <div status-switcher statuses="showStatuses" class="pull-right" statistic="story.statistic"></div>
            <div testcases-list="story.testCases" statuses="showStatuses" selected-uid="testcase.uid"></div>
        </div>
    </div>
    <div ui-view="testcase"></div>
</div>

